<template>
  <div class="app-container">
    <el-form :model="queryParamskucun" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="项目名称" prop="entryName">
        <el-input
          v-model="queryParamskucun.entryName"
          placeholder="请输入项目名称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="项目代码" prop="projectCode">
        <el-input
          v-model="queryParamskucun.projectCode"
          placeholder="请输入项目代码"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item label="入库时间" prop="warehousingTime">
        <el-date-picker clearable
          v-model="queryParamskucun.warehousingTime"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="请选择入库时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="出库时间" prop="deliveryTime">
        <el-date-picker clearable
          v-model="queryParamskucun.deliveryTime"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="请选择出库时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          size="mini"
          @click="handleAdd"
        >入库</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          size="mini"
          @click="handleChu"
        >出库</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          size="mini"
          @click="getListdingshi"
        >定时</el-button>
      </el-col>

<!--      <el-col :span="1.5">-->
<!--        <el-button-->
<!--          type="warning"-->
<!--          plain-->
<!--          icon="el-icon-download"-->
<!--          size="mini"-->
<!--          @click="handleExport"-->
<!--        >导出</el-button>-->
<!--      </el-col>-->
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="inventoryList"
              border
              :row-style="{height:'35px'}"
              :cell-style="{padding:'0px'}">
      <el-table-column label="序号" align="center" :index="indexMethod" type="index"  />
      <el-table-column label="项目名称" align="center" prop="entryName" />
      <el-table-column label="项目代码" align="center" prop="projectCode" />
      <el-table-column label="入库数量" align="center" prop="storageQuantity" />
      <el-table-column label="出库数量" align="center" prop="quantityDelivered" />
      <el-table-column label="入库时间" align="center" prop="warehousingTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.warehousingTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="出库时间" align="center" prop="deliveryTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.deliveryTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="货余量" align="center" prop="cargoAllowance" />
      <el-table-column label="入库人" align="center" prop="depositor" />
      <el-table-column label="出库人" align="center" prop="outboundPerson" />
      <el-table-column label="出库方式" align="center" prop="note3" >
        <template slot-scope="scope">
          <el-tag v-if="scope.row.note3=='手动出库'">{{ scope.row.note3}}</el-tag>
          <el-tag type="danger" v-if="scope.row.note3=='自动出库'">{{ scope.row.note3}}</el-tag>
          <el-tag type="success" v-if="scope.row.note3=='手动入库'">{{ scope.row.note3}}</el-tag>
        </template>
      </el-table-column>

    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParamskucun.pageNum"
      :limit.sync="queryParamskucun.pageSize"
      @pagination="getList"
    />
    <el-dialog :close-on-click-modal="false" :title="title" :visible.sync="open" width="900px" append-to-body>
      <el-form label-position="right" ref="form1" :model="form1"  :rules="rules"  label-width="120px">
        <el-container>

            <el-header>
              <el-divider content-position="left">
                <p style="color: #00afff; font-size: 18px;" v-show="this.flag==1">入库信息</p>
                <p style="color: #00afff; font-size: 18px;" v-show="this.flag==2">出库信息</p>
              </el-divider>
            </el-header>
            <el-main>

              <el-col :span="12" >
                <el-form-item v-show="this.flag==1" label="入库商品" prop="entryname">
                  <el-autocomplete
                    style="width: 100%"
                    placeholder="请输入入库商品"
                    v-model="form1.entryName"
                    :trigger-on-focus="false"
                    :fetch-suggestions="querySearchAsync"
                    @select="handleSelect"
                  >
                  </el-autocomplete>

                </el-form-item>
                <el-form-item v-show="this.flag==2" label="出库商品" prop="barcode">
<!--                  引用组件  trigger-on-focus设置成false使其只有输入的时候才能执行querySearchAsync方法(弹出下拉框)-->
                  <el-autocomplete
                    style="width: 100%"
                    placeholder="请输入出库商品"
                    v-model="form1.entryName"
                    :trigger-on-focus="false"
                    :fetch-suggestions="querySearchAsync"
                    @select="handleSelect"
                  >
                  </el-autocomplete>
                </el-form-item>
                <el-form-item  v-show="this.flag==1"  label="入库数量"  prop="position">
                  <el-input  v-model="form1.storageQuantity" placeholder="请输入入库数量" style="width: 100%"/>
                </el-form-item>
                <el-form-item  v-show="this.flag==2"  label="出库数量"  prop="position">
                  <el-input  v-model="form1.quantityDelivered" placeholder="请输入出库数量" style="width: 100%"/>
                </el-form-item>

              </el-col>
              <el-col :span="12" >
                <el-form-item label="项目代码" prop="projectCode">
                  <el-input v-model="form1.projectCode" placeholder="请输入助记码" :readonly="true" style="width: 100%"/>
                </el-form-item>
                  <el-form-item v-show="this.flag==1" label="入库时间" prop="warehousingTime">
                    <el-date-picker clearable
                                    v-model="form1.warehousingTime"
                                    type="date"
                                    value-format="yyyy-MM-dd"
                                    placeholder="请选择入库时间">
                    </el-date-picker>
                  </el-form-item>
                <el-form-item v-show="this.flag==2" label="出库时间" prop="warehousingTime">
                  <el-date-picker clearable
                                  v-model="form1.deliveryTime"
                                  type="date"
                                  value-format="yyyy-MM-dd"
                                  placeholder="请选择出库时间">
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-main>
          <el-header>
            <el-divider content-position="left">
              <p style="color: #00afff; font-size: 18px;">备注</p>
            </el-divider>
          </el-header>
          <el-main>
            <el-col :span="20" >
              <el-form-item label="备注" prop="note1">
                <el-input type="textarea" :rows="3" v-model="form1.note1" resize="none" placeholder="请输入备注" style="width: 99%;" ></el-input>
              </el-form-item>
            </el-col>
          </el-main>
        </el-container>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button v-show="this.flag==1" type="primary" @click="submitForm">入 库</el-button>
        <el-button v-show="this.flag==2" type="primary" @click="chuku">出 库</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listInventory, getInventory, delInventory, addInventory, chuInventory } from "@/api/module/shao/inventory";
import { listshaoProject } from "@/api/module/shao/project";
import { listdingshi } from "@/api/module/shao/details";

export default {
  name: "Inventory",
  data() {
    return {
      //用于控制是展示入库还是出库的变量
      flag:'',
      //用于控制加载
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      total1: 0,
      // 商品库存表格数据
      inventoryList: [],
      //存储项目信息表数据
      projectList:[],
      dingshiList:[],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 项目信息列表查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 2000,
        entryName: null,
        projectCategory: null,
        firstLevelClassification: null,
        secondaryClassification: null,
        tertiaryClassification: null,
        projectCode: null,
        mnemonicCode: null,
        unit: null,
        unitPrice: null,
        commissionPrice: null,
        clockUpTime: null,
        note1: null,
        note2: null,
        note3: null,
        note4: null,
        note5: null,
        note6: null,
        note7: null,
        note8: null,
        note9: null,
        note10: null
      },
      // 表单参数
      form: {},
      // 查询参数
      queryParamsdingshi: {
        userId: null,
        deptId: null,
        department: null,
        nickName: null,
        userName: null,
        post: null,
        handBrand: null,
        handCategory: null,
        handState: null,
        retentionStatus: null,
        mergeStatus: null,
        openingTime: null,
        drawTime: null,
        mergeHands: null,
        mergeBarBillsId: null,
        leaveTime: null,
        beforeLeave: null,
        beforeBarBillsId: null,
        entryName: null,
        projectCategory: null,
        projectCode: null,
        mnemonicCode: null,
        unit: null,
        unitPrice: null,
        commissionPrice: null,
        together: null,
        sailingsSigns: null,
        barBillsId: null,
        recordingTime: null,
        quantity: null,
        totalAmount: null,
        seat: null,
        orderNumber: null,
        paymentMethod: null,
        consumptionStatus: null,
        chargebackTime: null,
        reasonForChargeback: null,
        chargebackProcessorAccount: null,
        chargebackProcessorName: null,
        clockTime: null,
        nextClockTime: null,
        nextClockStatus: null,
        recordEmployeeNumber: null,
        recorderEmployeeName: null,
        roomType: null,
        openingHours: null,
        checkOutTime: null,
        checkOutStatus: null,
        note1: null,
        note2: null,
        note3: null,
        note4: null,
        note5: null,
        note6: null,
        note7: null,
        note8: null,
        note9: null,
        note10: null
      },
      // 库存表查询参数
      queryParamskucun: {
        pageNum: 1,
        pageSize: 30,
        entryName: null,
        projectCode: null,
        mnemonicCode: null,
        unit: null,
        storageQuantity: null,
        quantityDelivered: null,
        warehousingTime: null,
        deliveryTime: null,
        cargoAllowance: null,
        depositor: null,
        outboundPerson: null,
        note1: null,
        note2: null,
        note3: null,
        note4: null,
        note5: null,
        note6: null,
        note7: null,
        note8: null,
        note9: null,
        note0: null
      },
      // 表单参数
      form1: {},
      // 表单校验
      rules: {
      }
    };
  },
  created() {
    this.getList();
    this.getListproject();
  },
  methods: {
    /** 查询消费详细列表 */
    getListdingshi() {
      this.loading = true;
      listdingshi(this.queryParamsdingshi).then(response => {
        this.dingshiList = response.rows;
        this.loading = false;
        this.getList();
      });

    },
    //点击下拉框后将信息补全
    handleSelect(item){
      this.form1.projectCode = item.projectCode;
    },
    //cb 回调函数，将处理好的数据推回用于执行入/出库商品下拉框中的数据展示
    querySearchAsync(queryString, cb) {
      // 将查询到的项目信息数组推回
      let projectJson= JSON.parse(JSON.stringify(this.projectList).replace(/entryName/g,"value"));
      //通过执行createStateFilter进行过滤即为搜索操作得到的results即为输入字后得到的搜索结果并放入下拉框中
      let results = queryString ? projectJson.filter(this.createStateFilter(queryString)) : projectJson;
      //加载时长
      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        cb(results);
      }, 0.5*1000);
    },
    //根据输入的字段进行筛选用于querySearchAsync方法中
    createStateFilter(queryString) {
      return (state) => {
        return (state.value.toString().toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
    /** 查询项目信息列表 */
    getListproject() {
      this.loading = true;
      listshaoProject(this.queryParams).then(response => {
        this.projectList = response.rows;
        this.total1 = response.total;
        this.loading = false;
      });
    },
    //生成表头序号
    indexMethod(index) {
      index = (index + 1) + (this.queryParams.pageNum - 1) * this.queryParams.pageSize
      return index;
    },
    /** 查询商品库存列表 */
    getList() {
      this.loading = true;
      listInventory(this.queryParamskucun).then(response => {
        this.inventoryList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form1 = {
        id: null,
        entryName: null,
        projectCode: null,
        mnemonicCode: null,
        unit: null,
        storageQuantity: null,
        quantityDelivered: null,
        warehousingTime: null,
        deliveryTime: null,
        cargoAllowance: null,
        depositor: null,
        outboundPerson: null,
        note1: null,
        note2: null,
        note3: null,
        note4: null,
        note5: null,
        note6: null,
        note7: null,
        note8: null,
        note9: null,
        note0: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 入库按钮操作 */
    handleAdd() {
      this.flag=1;
      this.reset();
      this.open = true;
    },
    /** 出库钮操作 */
    handleChu() {
      this.flag=2;
      this.reset();
      this.open = true;
    },
    /** 入库提交按钮 */
    submitForm() {
      this.$refs["form1"].validate(valid => {
            addInventory(this.form1).then(response => {
              this.$modal.msgSuccess("入库成功");
              this.open = false;
              this.getList();
            });
        })
    },
    /** 出库提交按钮 */
    chuku(){
      this.$refs["form1"].validate(valid => {
        chuInventory(this.form1).then(response => {
          this.$modal.msgSuccess("出库成功");
          this.open = false;
          this.getList();
        });
      })
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('project/inventory/export', {
        ...this.queryParams
      }, `inventory_${new Date().getTime()}.xlsx`)
    }
  }
};
</script>
